import { useState, useRef, useMemo } from "react"
import TodoInput from "./todoInput"
import Todolist from "./todolist"
import Todooptions from "./todoOptions"
//data的类型
export type Item = {
    id: string;
    todo: string;
    completed: boolean;
}

let initialState: Array<Item> = [
    {
        id: "1",
        todo: "学react",
        completed: false
    },
    {
        id: "2",
        todo: "学ts",
        completed: true
    },
]

//枚举三个状态
export enum status {
    all = 0,
    completed = 1,
    unCompleted = 2
}

const Container = () => {
    //列表数据
    let [data, setData] = useState<Array<Item>>(initialState)

    //声明选项状态
    let [state, setState] = useState<status>(status.all)

    //数量统计

    let [counts, setCounts] = useState<Array<number>>([])

    //声明TodoInput组件中input输入框的状态
    let [val, setVal] = useState<string>("")
    //一个函数,用于让TodoInput组件将输入值回传到当前父组件
    // let handleInputChange = (val: string) => {
    //     // console.log(val)
    //     setVal(val)
    // }

    // 声明Ref

    const ipt = useRef<string | null>(null)

    //传递一个函数给子组件TodoInput,在TodoInput中点击提交按钮触发
    let addTodo = () => {
        // console.log(ipt)
        //声明一个对象
        let item: Item = {
            id: Math.random().toString(32).substring(2),
            todo: ipt.current!,
            completed: false
        }

        //添加逻辑
        setData([item, ...data])
    }

    //删除

    let del = (id: string) => {
        console.log(id)
        //在data中过滤掉id和传入id相同的选项

        let newData = data.filter((item: Item) => {
            return item.id !== id
        })
        setData(newData)

    }

    //勾选

    let checkIn = (checked: boolean, id: string) => {
        console.log(checked)
        console.log(id)
        //通过id到data中找到对应的数据,把completed变成checked

        let target: Item | undefined = data.find((item: Item) => {
            return item.id === id
        })

        target!.completed = checked

        setData([...data])
    }

    //选项按钮的切换

    let changeState = (status: status) => {
        console.log(status)
        setState(status)
    }

    //使用缓存钩子

    let filterData = useMemo<Array<Item> | undefined>(() => {
        switch (state) {
            case 0:
                //返回全部
                return [...data]
            case 1:
                //已完成
                return data.filter((item: Item) => {
                    return item.completed
                })

            case 2:
                return data.filter((item: Item) => {
                    return !item.completed
                })
        }
    }, [state, data])

    //计算数量
    let countsArr = useMemo<Array<number>>(() => {
        //全部的数量
        let all: number = data.length;
        //已完成数量
        let completed: number = (data.filter((item: Item) => {
            return item.completed
        })).length
        //未完成数量
        let unCompleted: number = (data.filter((item: Item) => {
            return !item.completed
        })).length

        return [all, completed, unCompleted]

    }, [data])

    console.log(countsArr)
    return (
        <fieldset>
            <legend>容器组组件</legend>
            <TodoInput ref={ipt} onAddTodo={addTodo} />
            <Todolist data={filterData} onDel={del} onCheckIn={checkIn} />
            <Todooptions countsArr={countsArr} onChangeState={changeState} />
        </fieldset>
    )
}

export default Container